<template>
    <div class="login">

        <!-- 
    
    :rules="userRules"   表单验证规则  -->


        <!-- :model="Forms"  	表单数据对象 -->

        <!--     prop="username"  获取 表单数据里面的某个字段的验证    
        v-model="Forms.username"   绑定表单数据 -->
        <el-form ref="formRef" :model="Forms" label-width="100px" class="container">
            <el-form-item label="用户名" prop="username" :rules="userRules">
                <el-input v-model="Forms.username" type="text" autocomplete="off" />
            </el-form-item>


            <el-form-item label="密码" prop="password" :rules="passwordRules">
                <el-input v-model="Forms.password" type="password" autocomplete="off" />
            </el-form-item>

            <el-form-item label="确认密码" prop="confirmPassword" :rules="confirmPasswordRuels">
                <el-input v-model="Forms.confirmPassword" type="password" autocomplete="off" />
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="submitForm(formRef)" class="login-btn">登陆</el-button>
                <el-button @click="resetForm(formRef)" class="reset-btn">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup>




import { getLogin } from '@/api/login'

import { ElMessage } from 'element-plus'

import { reactive, ref } from 'vue'
// import type { FormInstance } from 'element-plus'


//引入路由
import { useRouter } from 'vue-router'

//  引入 vuex

import { useStore } from 'vuex'
const store = useStore()

const router = useRouter()

const formRef = ref(null) // 获取当前的表单dom 元素



//  用户名验证
const userRules = ref([
    { required: true, message: '用户名不能为空' },
    { min: 3, max: 15, message: 'Length should be 3 to 15', trigger: 'blur' },

])


// 密码验证
const passwordRules = ref([
    { required: true, message: '密码不能为空' },
    { min: 3, max: 15, message: 'Length should be 3 to 15', trigger: 'blur' },
]
)




//  自定义验证规则
const checkPassword = (rule, val, callback) => {
    //   
    if (Forms.password !== Forms.confirmPassword) {
        callback(new Error("Two inputs don't match!"))
    } else {
        callback()
    }
}



//  再次验证密码
const confirmPasswordRuels = ref([
    { required: true, message: '再次输入密码不能为空' },
    { min: 3, max: 15, message: 'Length should be 3 to 15', trigger: 'blur' },

    { validator: checkPassword }  // 自定义验证
]
)







// 定义表单数据对象
const Forms = reactive({
    username: 'admin',
    password: '123456',
    confirmPassword: '123456'
})

const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate(async (valid) => {


        // valid  为真则表示验证通过

        console.log('valid', valid)




        if (valid) {
            // 1 验证通过后 发送请求
            // 2 传递用户名和密码   
            console.log(Forms)
            let { data, meta: { msg, status } } = await getLogin(Forms)

            console.log(msg)
            console.log(status)
            console.log(data)

            //  3  如果失败了  给出提示  不进行跳转 
            if (status !== 200) return ElMessage.error(msg)

            //   4  成功后 跳转到 home  页面 
            //   4.1  成功后 需要  存储token    
            // store.setToken(data.token)

            store.commit('setToken', data.token)

            store.commit('setUserName', data.username)
            // 4.2  给出成功的提示 
            ElMessage.success(msg)

            //4.3  进行路由跳转  
            router.replace('/home')




        } else {
            console.log('error submit!')
            return false
        }
    })
}

const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}

</script>

<style lang="scss" scoped>
.login {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #2f4050;

    .container {

        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 400px;
        background: white;
        height: 200px;
        padding-top: 40px;


        .login-btn,
        .reset-btn {
            width: 40%;
        }

    }
}

.el-input {
    width: 80%;
}

// .el-button {
//   background-color: pink;
// }
</style>